<template>
  <div class="item">
    <div class="title after" style="line-height:45px;padding-bottom:10px">
      <div class="series f-l">
        <el-button
          v-for="(item, index) in series.list"
          :type="series.active == index?'primary':''"
          size="small"
          class="f-w-b"
          @click="series.active=index;page.current=1;search.value='';searchHandle();"
          :key="index"
        >{{item}}</el-button>
      </div>
      <div class="search f-r">
        <el-input
          v-model="search.value"
          size="small"
          placeholder="搜索"
          @keyup.enter.native="searchHandle();page.current=1"
          class="input"
        ></el-input>
        <el-button
          size="small"
          type="primary"
          @click="searchHandle();page.current=1"
          class="button"
        >搜索</el-button>
        <el-button
          size="small"
          type="primary"
          @click="series.active==3?searchStreetUser():'';form.list.type=series.active+1;form.show =true;form.edit=false"
          class="button"
        >添加用户</el-button>
      </div>
    </div>
    <div class="list">
      <el-table ref="selects" :data="list" @selection-change="change" v-loading="loading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="头像" width="100">
          <template slot-scope="scope">
            <img
              :src="scope.row.icon?scope.row.icon:'/static/images/user.png'"
              alt
              style="border-radius: 3px;width:40px;height:40px"
            />
          </template>
        </el-table-column>
        <el-table-column label="账号" prop="username"></el-table-column>

        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="Q Q" prop="qq"></el-table-column>
        <el-table-column label="微信号" prop="wechat"></el-table-column>
        <el-table-column label="备注" prop="info"></el-table-column>
        <el-table-column label="隶属于" prop="parent_name"></el-table-column>
        <el-table-column label="添加时间" prop="addtime"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="form.list = {...scope.row};form.show=true;form.edit=true"
            >编辑</el-button>
            <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <div class="action after">
        <div class="left">
          <el-button @click="checkAll" size="small">全选</el-button>
          <el-button @click="del(checkList)" size="small" type="danger">删除选中项</el-button>
        </div>
        <div class="right">
          <el-pagination
            layout="total,prev, pager, next"
            :total="page.count"
            :page-size="page.size"
            @current-change="pageChange"
            :current-page="page.current"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 添加修改用户 -->
    <el-dialog title="操作" width="600px" :visible.sync="form.show" @closed="down">
      <el-form :model="form.list" :rules="form.rules" ref="form.list" size="small">
        <el-form-item label="账号 : " label-width="100px" prop="username">
          <el-input v-model="form.list.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型 : " label-width="100px" prop="type">
          <el-select v-model="form.list.type" placeholder="请选择类型" style="width:100%">
            <el-option label="考评员" :value="1"></el-option>
            <el-option label="审核员" :value="2"></el-option>
            <el-option label="街道管理员" :value="3"></el-option>
            <el-option label="村管理员" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="隶属于街道 : " label-width="100px" prop="parent" v-if="form.list.type==4">
          <el-select v-model="form.list.parent" placeholder="请选择上级" style="width:100%">
            <el-option
              :label="item.username"
              :value="item.id"
              v-for="item in street.list"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="密码 : " label-width="100px" :prop="form.edit?'':'password'">
          <el-input v-model="form.list.password" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="手机号 : " label-width="100px">
          <el-input v-model="form.list.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="Q Q : " label-width="100px">
          <el-input v-model="form.list.qq" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="微信 : " label-width="100px">
          <el-input v-model="form.list.wechat" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注 : " label-width="100px">
          <el-input v-model="form.list.info" autocomplete="off" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submit()" size="small" :disabled="form.state">提 交</el-button>
        <el-button @click="form.show=false" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      form: {
        show: false,
        list: {
          username: "",
          type: 1,
          password: "",
          phone: "",
          qq: "",
          wechat: "",
          info: ""
        },
        // 表单验证
        rules: {
          type: [{ required: true, message: "请选择类型", trigger: "blur" }],
          username: [
            { required: true, message: "请输入账号", trigger: "blur" }
          ],
          password: [
            { required: true, message: "请输入密码", trigger: "blur" }
          ],
          parent: [{ required: true, message: "请选择上级", trigger: "blur" }]
        },
        // 表单提交状态
        state: false,
        //是否为修改
        edit: false
      },
      // 系列
      series: {
        list: ["考评员", "审核员", "街道管理员", "村管理员"],
        active: 0
      },
      // 页码(默认条数,页数,总数量)
      page: {
        size: 10,
        current: 1,
        count: 0
      },
      // 空列表 存储已经选中的选项
      checkList: [],
      // 搜索
      search: {
        value: ""
      },
      // 街道
      street: {
        list: []
      },
      // 加载
      loading: false
    };
  },
  methods: {
    // 搜索街道管理员
    searchStreetUser() {
      var data = {
        type: 3
      };
      this.axios.post("/admin/Index/search_user", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.street.list = ref.other.data;
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
      });
    },
    // 增加修改
    submit() {
      this.$refs["form.list"].validate(valid => {
        if (valid) {
          var form = this.form;
          form.state = true;
          var data = { ...form.list };
          data["T"] = "user";
          this.axios.post("/admin/Index/handle", data).then(ref => {
            var ref = ref.data;
            if (ref.state) {
              this.common.message({ message: ref.info });
              // 关闭弹窗
              form.show = false;
              // 重新搜索
              this.searchHandle();
            } else {
              this.common.message({ message: ref.info, type: "error" });
            }
            // 关闭提交锁定
            form.state = false;
          });
        }
      });
    },
    // 删除
    del(row) {
      // 选中项为空时
      if (row.length == 0) {
        this.common.message({
          message: "删除失败,请选择删除项",
          type: "warning"
        });
        return false;
      }
      this.common.confirm().then(() => {
        var data = { T: "user", id: [] };
        row = row.length ? row : [row];
        for (var i in row) {
          data.id.push(row[i]["id"]);
        }
        var url = "/admin/Index/del";
        // 请求发送
        this.axios.post(url, data).then(ref => {
          var ref = ref.data;
          if (ref.state) {
            // 计算总页数
            var n = Math.ceil((this.page.count - row.length) / this.page.size);
            // 更新页码
            if (n && n < this.page.current) this.page.current--;
            // 重新搜索
            this.searchHandle();
            this.common.message({ message: ref.info });
          } else {
            this.common.message({ message: ref.info, type: "error" });
          }
        });
      });
    },
    // 清空
    down() {
      this.form.list = {
        username: "",
        type: 1,
        password: "",
        title: "",
        phone: "",
        qq: "",
        wechat: "",
        info: ""
      };
      this.$refs["form.list"].resetFields();
    },
    // 搜索
    searchHandle() {
      // 开启加载
      this.loading = true;
      var data = {
        type: this.series.active,
        info: this.search.value,
        del_admin: true,
        // 页码
        page: {
          current: this.page.current,
          size: this.page.size
        }
      };
      data.type++;
      this.axios.post("/admin/Index/search_user", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.list = ref.other.data;
          this.page.count = ref.other.count;
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
        // 开启加载
        this.loading = false;
      });
    },
    // 当选择框出现改变时
    change(selection) {
      this.checkList = selection;
    },
    // 选中全部
    checkAll() {
      this.list.forEach(row => {
        this.$refs.selects.toggleAllSelection(row);
      });
    },
    // 页码改变
    pageChange(val) {
      this.page.current = val;
      this.searchHandle();
    }
  },
  created() {
    this.searchStreetUser();
    this.searchHandle();
  }
};
</script>
<style scoped>
.search {
  float: right;
}
.search .input {
  width: 200px;
  margin-right: 10px;
}
</style>